<template>
  <el-dialog v-if="travel" title="更新主题旅行" :visible="dialogVisible" width="50%" :before-close="doClose">
    <el-form ref="travelForm" label-position="right" label-width="120px" :model="travel" :rules="travelRules">
      <el-form-item prop="name" label="标题">
        <el-input v-model="travel.name" />
      </el-form-item>
      <el-form-item prop="price" label="费用">
        <el-input v-model="travel.price" />
      </el-form-item>
      <el-form-item prop="beginning" label="出发地">
        <el-input v-model="travel.beginning" />
      </el-form-item>
      <el-form-item label="主题">
        <el-select v-model="travel.travelTheme.id" placeholder="请选择">
          <el-option
            v-for="item in $store.getters.themeTravel.theme"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="活动类型">
        <el-select v-model="travel.travelActivity.id" placeholder="请选择">
          <el-option
            v-for="item in $store.getters.themeTravel.activity"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="旅行方式">
        <el-select v-model="travel.travelWay.id" placeholder="请选择">
          <el-option
            v-for="item in $store.getters.themeTravel.way"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="hot" label="热度">
        <el-input v-model="travel.hot" />
      </el-form-item>
      <el-form-item prop="days" label="天数">
        <el-input v-model="travel.days" />
      </el-form-item>
      <el-form-item label="图片">
        <UploadImg
          ref="uploadImg"
          :update-img-url="updateImgUrl"
          :orgin-img-url="orginImgUrl"
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="doClose">取 消</el-button>
      <el-button type="primary" @click="doUpdate">修 改</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  validTravelName,
  validPrice,
  validTraveBeginning,
  validTravelHot,
  validNumberLength11
} from '@/utils/validate'
import { getToken } from '@/utils/auth'
import { updateTravel } from '@/api/theme-travel'
import UploadImg from '@/components/UploadImg'
export default {
  components: {
    UploadImg
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    travell: {
      type: Object,
      required: true,
      default() {
        return {
          id: -1,
          travelTheme: {
            id: -1
          },
          travelActivity: {
            id: -1
          },
          travelWay: {
            id: -1
          }
        }
      }
    }
  },
  data() {
    const validateTravelName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入标题'))
      } else if (!validTravelName(value)) {
        callback(new Error('长度1-100'))
      } else {
        callback()
      }
    }
    const validatePrice = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输价格'))
      } else if (!validPrice(value)) {
        callback(new Error('这不是有效的两位小数'))
      } else {
        callback()
      }
    }
    const validateTraveBeginning = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入出发地'))
      } else if (!validTraveBeginning(value)) {
        callback(new Error('长度1-50'))
      } else {
        callback()
      }
    }
    const validateTravelHot = (rule, value, callback) => {
      if (!validTravelHot(value)) {
        callback(new Error('长度0-11'))
      } else {
        callback()
      }
    }
    const validateTravelDays = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入天数'))
      } else if (!validNumberLength11(value)) {
        callback(new Error('长度0-11'))
      } else {
        callback()
      }
    }
    const getEmptyTravel = () => {
      return {
        id: -1,
        travelTheme: {
          id: -1
        },
        travelActivity: {
          id: -1
        },
        travelWay: {
          id: -1
        }
      }
    }
    return {
      travel: getEmptyTravel(),
      updateImgUrl: '',
      orginImgUrl: '',
      travelRules: {
        name: [{ required: true, trigger: 'blur', validator: validateTravelName }],
        price: [{ required: true, trigger: 'blur', validator: validatePrice }],
        beginning: [{ required: true, trigger: 'blur', validator: validateTraveBeginning }],
        hot: [{ required: false, trigger: 'blur', validator: validateTravelHot }],
        days: [{ required: true, trigger: 'blur', validator: validateTravelDays }]
      },
      token: getToken()
    }
  },
  watch: {
    travell() {
      this.travel = this.travell
      this.updateImgUrl = `${process.env.VUE_APP_BASE_API}travel/${this.travel.id}/img`
      // if (this.travel.img) {
      //   const index = this.travel.img.indexOf('?')
      //   if (index >= 0) {
      //     this.travel.img = this.travel.img.slice(0, index)
      //   }
      //   this.orginImgUrl = `${this.$imgApi}/travel-img/${this.travel.img}`
      // }
    }
  },
  methods: {
    doUpdate() {
      this.$refs.travelForm.validate(valid => {
        if (valid) {
          updateTravel(this.travel).then(res => {
            this.$message.success(res.message)
            this.edited(res.data)
          })
        } else {
          this.$message.error('请检查表单')
        }
      })
    },
    edited(travel) {
      this.$emit('edited', { travel })
      this.doClose()
    },
    doClose() {
      this.$refs.uploadImg.refreshImg()
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.switch {
  margin: 0 20px 20px 20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.detail-d {
  margin: 6px;
}

.but-group {
  width: 70px;
}

::v-deep .el-autocomplete-suggestion {
  width: auto !important;
}
</style>
